.zone {
    position: relative;
    width: 100%;
    height: 100%;

    .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

    .add {
        position: fixed;
        bottom: 72px;
        right: 24px;
        width: 40px;
        height: 40px;
        color: var(--color-white);
        font-size: 12px;
        text-align: center;
        background-color: rgb(var(--primary-6));
        border: none;
        border-radius: var(--border-radius-circle);
        outline: none;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0, 0, 1, 1);
    }

    .not-more {
        padding-top: 10px;
        padding-bottom: 5px;
        text-align: center;
        color: var(--color-neutral-4);
        user-select: none;
    }

    .show-more {
        padding-top: 10px;
        padding-bottom: 5px;
        text-align: center;
        color: var(--color-neutral-4);
    }
}

.zone-add {
    .location {
        margin-top: 7px;
    }

    .image {
        margin-top: 7px;
    }
}

.zone {
    .item {
        border-bottom: 1px solid var(--color-neutral-3);
        margin: 7px;


        .header {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            width: 100%;


            .create-time {
                color: var(--color-neutral-6);
                font-size: 0.8em;
            }
        }

        .tags {
            margin-top: 7px;
        }

        .image {
            margin-top: 14px;

            .arco-image {
                margin-bottom: 2px;
            }
        }

        .location {
            color: rgb(var(--green-6));
            margin-top: 14px;
            text-align: right;
        }

        .comment {
            background-color: var(--color-neutral-2);
            margin-top: 7px;

            .comment-item {
                margin: 4px;
                padding: 7px 5px;
                border-bottom: 1px solid var(--color-neutral-3);

                &:last-child {
                    border-bottom: none;
                }

                .comment-content {
                    margin-bottom: 7px;
                }

                .action {
                    display: flex;
                    flex-direction: row-reverse;
                    .arco-btn {
                        border: none;
                    }
                }
            }
        }
        a {
            color: rgb(var(--arcoblue-6));
        }
    }
}
